<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <link rel="stylesheet" href="stylesheets/index.css">
  <style>
	.blue-bg {
		background-color: blue;
	}
	.red {
		color: red;
	}
	.text-danger {
		font-size: 100px;
	}
	.border {
		border: 2px solid #0000FF;
	}
	.red-bg {
		background-color: red;
	}
	.card {
		border: 2px solid #0000FF;
		display: none;
	}
  </style>
</head>
<body>

<div id="app">
	<!-- 
	<button
	  class="border"
	  :class="{ 'red-bg': selectedIndex === item,  }"
	  @click="handleClick(item)"
	  v-for="item of 10"
	>
	  {{ item }}
	</button> 
	-->
	<button
	  class="border"
	  :class="[selectedIndex === item ? 'red-bg' : '', '']"
	  @click="handleClick(item)"
	  v-for="item of 10">{{ item }}</button>
	<hr>
	
	
	
	
	
	
	
	<div
	  class="card"
	  :style="{ display: selectedIndex === item ? 'block': 'none' }"
	  v-for="item of 10">
		<h1>{{ item }}</h1>
	</div>
	{{ selectedIndex }}
	<!-- <h1 :class="`blue-bg ${h1Class}`">{{ msg }}</h1> -->
	<!-- <h1 :class="h1Class">{{ msg }}</h1> -->
	<!-- <h1 class="blue-bg" :class="h1Class">{{ msg }}</h1> -->
	<!-- <h1 class="blue-bg" :class="{ red: isRed }">{{ msg }}</h1> -->
	<!-- <h1 class="blue-bg" :class="{ red: isActive, 'text-danger': hasError }">{{ msg }}</h1> -->
	<!-- <h1 class="blue-bg" :class="classObj">{{ msg }}</h1> -->
	<!-- <h1 class="blue-bg" :class="[activeClass, isRed ? errorClass : '']">{{ msg }}</h1> -->
	<!-- <h1 class="blue-bg" :style="{ color: msgColor, height: msgHeight + 'px' }">{{ msg }}</h1> -->
	<!-- <h1 class="blue-bg" :style="styleObj">{{ msg }}</h1> -->
	<!-- <h1 class="blue-bg" :style="[styleObj, styleObj1]">{{ msg }}</h1> -->
	<!-- <button @click="isRed = !isRed">toggle class</button> -->
	<!-- <button @click="h1Class = 'red'">change style</button> -->
</div>

<script src="./vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
